iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 5
0
Modern Web

無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)系列 第 5

[day5]-好人才,不用嗎?數位履歷的規劃與建置—個人網站、WebAPP

  • 分享至 

  • xImage
  •  

新世代!用新工具推薦自己吧!

在這第五天,終於要正式的開工了/images/emoticon/emoticon18.gif,在這篇中講述規劃個人網站的要素以及用什麼工具來建置我們的數位履歷~


文章標題下的有點好笑,看看就好了啦XD(始終打不出的刪除線)

**身為前偏後端(?)工作者,怎麼可以沒有身為自己的個人網站作品集呢!**而且換工作潮即將來臨,就趕快開始我們的實作吧!

首先,一個好的網站一定要有個清楚的規劃~我用Xmind簡要規劃了我的個人網站需要哪些頁面,如下↓

http://ithelp.ithome.com.tw/upload/images/20161206/20103130c1HnYsDCBy.png

個人網站主打的是必需吸引人逗留觀看並讓人印象深刻,不然我幹嘛無聊看你的身家背景XD

雖然網站的頁面很少,但因個人網站本質就是你的形象網站需要讓人駐足下來觀看,所以主要以「特效為主,功能為輔」來製作!
在這邊我主要使用的CSS框架為Bootstrap 3、前端語言為jQuery框架、後端語言用PHP去作程式的撰寫。

計畫上,先做好靜態的個人網站後,會先教大家上傳至OpenShift的免費server空間來作一個上線的動作!之後會把我們做好的個人Web使用Cordova(也有人說是PhoneGap)來製作個人的App,並加一些實用的功能
例如可以加一個 請面試官為自己打分數的功能、串連Google map來計算你家離公司的距離有多遠、即時拿到聘書回報系統等..... 既無聊又可以展現自己的技能的功能..../images/emoticon/emoticon01.gif

附圖看比較清楚:
http://ithelp.ithome.com.tw/upload/images/20161206/20103130Z1qBRYhXgu.png

由於我美感不是那麼好(工科出身的啦!),借助一下現成CSS UI框架-Bootstrap 3之力來做我們的網站,Bootstrap我覺得最好用的地方在於他的「格線系統」!

而這個「格線系統」是什麼呢?
我們可以輕鬆打造出響應式網頁設計網頁的配置,不用自己去調整@Media querie,對需急速開發的人來說是一大的福音!

在現代網站設計的趨勢裡,網站備有響應式網頁設計(Responsive Web Design),簡稱RWD是很重要的!
簡要來說,網站在各種裝置上,頁面會隨著裝置的螢幕大小來作自動的調整,在閱覽上會有更好的使用者經驗

引用維基百科(回應式網頁設計)-
"一種網頁設計的技術做法,該設計可使網站在多種瀏覽裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上> 閱讀和導航,同時減少縮放、平移和捲動。"

再分享一個在FB前端社團PO的Bootstrap簡報,這位前輩把Bootstrap介紹得很易懂!有興趣的人可以看看:

引用自Chih-cheng Wang - Bootstrap4 與他的好搭檔
(http://www.slideshare.net/chihchengwang3/bootstrap4)

之後,在撰寫程式途中會講解我遇到的一些難題及如何去克服他~
今天先這樣斷尾吧....來去想頁面配置去../images/emoticon/emoticon20.gif


文後-

這樣剩下的25天做的完嗎.......好大的挑戰啊..../images/emoticon/emoticon06.gif


同步連載於blogger-"King 學習前端之人生"
[ 著作權為 Ying-chi Tzeng所有,轉載請告知~]


上一篇
[day4]開發環境可以重裝,但地球的環境只有一個-Sublime、MAMP、FileZilla
下一篇
[day6]-好人才,不用嗎?之個人網站建置begin~從bootstrap開始!
系列文
無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Ivan Wei
iT邦新手 5 級 ‧ 2016-12-07 01:40:40

最後推了 Bootstrap 4 一把,有沒有考慮將 CSS framework 從 Bootstrap 3 換成 4 ? XDD

哇!可以挑戰看看喔~反正是鐵人賽嘛~XD/images/emoticon/emoticon07.gif

我要留言

立即登入留言